﻿
css:
body {
 background: url("nature.jpg") no-repeat;
 background-size: cover;
 font-family:arial;
 margin-left: 10%;
 coloc:white;
}

*{
	margin:0px;
	padding: 0px;
}

.containar
{
	
	width:100%;
	margin:auto;
}
.wrapper
{
background-color:gray;
	width:99%;
	
	margin:auto;
	
	}

.dark {
		background-color:green;
		color:white;
	
	
	}
	.light {
		background-color:tomato;
		color:black;
		
	}

	.wihoutcolor {
		background-color:0;
		color:0;
		
	}


	
	#top_left {
		display:inline-block;
		border:-1px solid gray;
		margin-left:15px;
		margin-bottom:5px;
		
	}
	
	#top_right {
		
		float:right;
		
		
	}
	#top_div {
		height:40px;
		line-height:40px;
		
	}
	#loggo_left {
		width:250px;
		margin-top:-1px;
		display:inline-block;
		border:1px solid gray;
		height:70px;
		line-height:70px;
		margin-left:15px;
		float: left;
	}
	#loggo_right {
		float:right;
		border:-1px solid yellow;
		margin-top:10px;
		margin-left:10px;
		margin-right:20px;
		width:250px;
		
		
		
	}
	#firma_navn {
		float:center;
		margin-top;5px;
		display:inline-block;
		border:-1px solid yellow;
		width:600px;
		height:70px;
		line-height:20px;
		margin-bottom:-22px;
		
		
	}


 ul {
	list-style:none;
	text-align:center;
	
}

 ul li {
	background-color:#1aff66;
	border: 3px solid blue;
	width:290px;
	height:50px;
	line-height: 50px;
	
	float: left;
	position: relative;
	border-radius: 10px;
	
}

 ul li a {
	
	text-decoration: none;
	color: red;
	display:block;
	text-align:left;
	text-coloc:red;
	line-height:50px;
	
}

 ul li a:hover 
   {
	background-color: blue;
	   border-radius: 10px;
	   height:50px;
	   text-align:center;
	   line-height:50px;
}
 ul ul {
	position:absolute;
	display: none;
}
 ul li:hover > ul
    {
	display:block;
		
}
 ul ul ul
{
	margin-left:290px;
	top: 0px;
}

#text_overlay {
 	background-color:0;
	width:600px;
	height:600px;
	margin:3px;
	display:inline-block;
	padding:20;
	box-shadow: 10px 10px 5px yellow;
	margin-bottom:10px;
	margin-left:20px;
	border:4px solid blue;
 }	
.wrapper_withoutcolor
{
	background-color:0;
	width:99%;
	
	margin:auto;
	
	}
	
	
#main-2 {
	width: 1490px;
	height: 90px;
	text-align: middle;
	background: #66ff66;
	margin: 4px auto;
	border: solid 3px #ff3819;
	padding:20px;
	font-family: Calibri (Brødtekst);
    font-size: 40px;
	color: red;
	text-align: center;
	
    
}
	.search-form {
	 float: left;
	 width: 300px;	 
	 height: 60px;
	 background-color: red;
	 opacity: .8,5;
	 line-height: 60px;
	 text-align: center;
	 font-family: arial;
	 font-size: 20px;
	 
}	 

	input[tyoe=teext] {
		padding:7px;
		border:2px;
		font-size:20px
		font-family: arial;
		font-size: 20px;
		text-align: center;
}		
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3, .bar4 {
    width: 35px;
    height: 8px;
	padding-bottom:3px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
} 

#main-1 {
	width: 300px;
	height: 200px;
	text-align: center;
	background: #66ff66;
	margin: 2px auto;
	border: solid 3px #ff3819;
	padding:40px;
	font-family: Calibri (Brødtekst);
    	font-size: 40px;
	color: blue;
	text-align: center;
	position: absolute;
}


		#footer_seksjon   {
			
		background-color:red;
		width:300px;
		height:280px;
		margin:3px;
		display:inline-block;
		padding:25;
		box-shadow: 10px 10px 5px yellow;
		margin-bottom:10px;
					
}

	#footer_seksjon-1   {
			
		background-color:red;
		width:400px;
		height:250px;
		
		margin:8px;
		display:inline-block;
		padding:25;
		box-shadow: 10px 10px 5px yellow;
		margin-bottom:5px;
		margin-top: 6px;
		margin-left:8px;
		border:4px solid blue;
		color:yellow;
		text-align:center-left;
		float: left;			
}
	#footer_seksjon-2   {
			
		background-color:red;
		width:710px;
		height:250px;
		margin:8px;
		display:inline-block;
		padding:25;
		box-shadow: 10px 10px 5px yellow;
		margin-bottom:5px;
		margin-top: 6px;
		margin-left:20px;
		border:4px solid blue;
		color:yellow;
		text-align:center-left;
		float: center;
}

 
 
 	
/* Fixed/sticky icon bar (horizantal aligned 80% from the top of the screen) */
.icon-bar {
  position: relative;
  top: 80%;
  float:right;
  width:35px;
	display:inline-block;
	height:250px;
  	border:4px solid blue;
	margin-top: 5px;
	margin-bottom:-5px;	
	box-shadow: 10px 10px 5px yellow;
	margin-right:15px;
	

  -webkit-transform: translateY(50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-0%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 3px;
  transition: all 0.5s ease;
  color: white;.css
  font-size:35px;
  box-shadow: 2px 2px 2px yellow;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: red;
}

.twitter {
  background: #55ACEE;
  color: red;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: black;
}

.youtube {
  background: #bb0000;
  color: black;
} 

 
 
 
 
 
 
 
 
 
 

